<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: 600px;
      margin: 100px auto;
    }

    .wrap .navBar {
      display: flex;
    }

    .wrap .navBar li {
      flex: 1;
      text-align: center;
      line-height: 45px;
      border: 1px solid #333;
    }

    /* .wrap .navBar li{
            border-left:0 ;
        }
        .wrap .navBar li:first-child{
            border-left: 1px solid #333;
        } */

    /* .wrap .navBar li:not(:first-child){
            border-left: 0;
        } */

    /* 和li相邻的li  => 除第一个以外所有的li */
    .wrap .navBar li+li {
      border-left: 0;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <ul class="navBar">
      <li data-index="0">tab_01</li>
      <li>tab_02</li>
      <li>tab_03</li>
      <li>tab_04</li>
      <li>tab_05</li>
      <li>tab_06</li>
    </ul>
  </div>
</body>
<script>
  // 多元素绑定事件   => 遍历伪数组,获取数组中的每一个元素 ,再再绑定事件

  // 多元素绑定事件问题:
  // 每次点击元素 li和i都是最后一个!!!!
  // 原因:
  // 页面加载时 事件只做绑定(提前约定好了 点击时需要执行的内容)并不会执行,等待页面加载完毕全局 li和i 变为(<li>tab_06</li>  6)
  // 点击li 触发事件时: => 执行function中的上下文,此时函数作用域中 没有定义li和i, 会向外跳一层找全局作用域 (全局的li 和 i =>  <li>tab_06</li>  6)

  // 点击事件 肯定是在页面加载之后执行的

  // 解决方法
  // (1) 需求替换的方案
  // li  -> this 指向绑定事件的元素  属于谁就指向谁
  // i   -> 页面加载时  循环给每一个元素定义一个 自定义属性data-index 对应下标  => 点击获取该元素的data-index =>对应下标

  var navBar = document.getElementsByClassName("navBar")[0];
  var liList = navBar.getElementsByTagName("li");
  console.log(liList);  // [li,li,li,li,li,li]

  // debugger;
  for (var i = 0; i < liList.length; i++) { // i<6
    var li = liList[i];
    // console.log(li);
    // 页面加载时  循环给每一个元素定义一个 自定义属性data-index 对应下标
    li.setAttribute("data-index", i);

    // 需求:每次点击 打印当前元素和下标
    // 页面加载时 事件只做绑定(提前约定好了 点击时需要执行的内容)  => 点击元素是才会触发
    li.onclick = function () {
      // this 执行绑定事件的元素 (属于谁就指向谁)
      var index = this.getAttribute("data-index");
      console.log(this, index);
    }

  }
  console.log("页面加载完毕", li, i);  //全局的li和i  <li>tab_06</li>  6


</script>

</html>